/* eslint-disable */
/**
 * @Description: 订单退换货主表
 * @author ourslookAdmin
 * @date 2019-05-09 19:04:12
 */
import React, { Fragment } from 'react';
import {
  Avatar,
  BackTop,
  Button,
  Card,
  Checkbox,
  Col,
  Divider,
  Drawer,
  Form,
  Icon,
  Input,
  List,
  Radio,
  Row,
  Select,
  Spin,
  Steps,
  Tabs,
  Tag,
  Timeline,
  Tooltip,
} from 'antd';
import { formatMessage, FormattedMessage } from 'umi/locale';
import 'antd/dist/antd.css';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { requestLists, requestPromise } from '@/utils/request';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import numeral from 'numeral';
import Modal from 'drag-modal';
import { Link } from 'react-router-dom';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import BaseForm from '../../../components/ourslook/BaseForm';
import ETable from '../../../components/ourslook/ETable';
import Ellipsis from '../../../components/ourslook/Ellipsis';
import { getWebPath } from '../../../utils/request';
import uiUtils, { hasPermission, rulesReg } from '../../../utils/uiUtils';
import styles from '../../../utils/ourslook.less';
import DefaultImage from '../../../components/ourslook/DefaultImage';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const TextArea = Input.TextArea;
const Password = Input.Password;
const CheckboxGroup = Checkbox.Group;
const Step = Steps.Step;

/**
 * 售后类型
 * com.ourslook.mall.utils.Constant.OrderRefundType
 */
const OrderRefundType = {
  0: '仅退款',
  1: '退款退货',
  2: '换货',
};
//所有的快递公司信息
let allExpressInfo = [];

@connect(() => ({}))
class Refunds extends React.Component {
  params = {
    page: 1,
    limit: 10,
  };

  formItemLayout = {
    labelCol: { span: 5 },
    wrapperCol: { span: 19 },
  };

  /**
   * https://ant-design.gitee.io/components/table-cn/
   *
   * 需要指定 column 的 width 属性，否则列头和内容可能不对齐。（必须留一列不设宽度或者minWidth以适应弹性布局）
   * 建议指定 scroll.x 为大于表格宽度的固定值或百分比。注意，且非固定列宽度之和不要超过 scroll.x, 一般无table正常展开的宽度
   * 未知长度字段或者字符特别多的字段不要放置在列表
   */
  columns = [
    {
      title: '',
      width: 30,
      align: 'center',
      fixed: 'left',
      render: (value, record, index) => index + 1,
    },
    {
      title: '退款编号',
      dataIndex: 'refundsNo',
      width: 120,
      align: 'center',
      sorter: false,
      key: 'refunds_no',
      fixed: 'left',
    },
    {
      title: '用户名',
      dataIndex: 'username',
      width: 120,
      align: 'center',
      sorter: false,
      key: 'username',
      fixed: 'left',
      render: (value, record, index) => `${value}\n${record.mobile}`,
    },
    {
      title: '订单编号/商品',
      dataIndex: 'orderNo',
      width: 170,
      align: 'center',
      sorter: false,
      key: 'order_no',
      fixed: 'left',
      render: (value, record, index) => (
        <Ellipsis length={35} tooltip>{`${value} \n ${record.productName}`}</Ellipsis>
      ),
    },
    {
      title: '退款金额',
      dataIndex: 'productOrderRefundsPrice',
      width: 125,
      align: 'center',
      sorter: false,
      render: (value, record, index) => {
        if (
          value !== null &&
          value !== undefined &&
          record.refundsMoney !== null &&
          record.refundsMoney !== undefined
        ) {
          return (
            <Fragment>
              <Tooltip title="订单金额">
                <span style={{ display: 'block' }}>{`￥${numeral(value).format('0,0.00')}`}</span>
              </Tooltip>
              <Tooltip title="用户申请退款金额">
                <span style={{ color: '#f0ad4e', cursor: 'pointer' }}>
                  {`￥${numeral(record.refundsMoney).format('0,0.00')}`}
                </span>
              </Tooltip>
            </Fragment>
          );
        }
        return '-';
      },
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      key: 'create_time',
    },
    {
      title: '售后类型',
      dataIndex: 'refundsType',
      width: 120,
      align: 'center',
      sorter: false,
      key: 'refunds_type',
      render: (value, record, index) =>
        value === 0 ? (
          <Tag style={{ cursor: 'default' }} className={styles.label_success}>
            仅退款-{record.refundsGoodsType ? '已经收到货' : '未收到货'}
          </Tag>
        ) : value === 1 ? (
          <Tag style={{ cursor: 'default' }} className={styles.label_danger}>
            退款退货-{record.refundsGoodsType ? '已经收到货' : '未收到货'}
          </Tag>
        ) : value === 2 ? (
          <Tag style={{ cursor: 'default' }} className={styles.label_primary}>
            换货-{record.refundsGoodsType ? '已经收到货' : '未收到货'}
          </Tag>
        ) : (
          <Tag style={{ cursor: 'default' }} className={styles.label_default}>
            -
          </Tag>
        ),
    },
    {
      title: '退款状态',
      dataIndex: 'refundsStatus',
      width: 120,
      align: 'center',
      sorter: false,
      key: 'refunds_status',
      render: (value, record, index) => {
        const hightLigt = [80, 85, 100];
        if (hightLigt.includes(record.refundsStatus)) {
          return (
            <span style={{ color: '#f0ad4e', cursor: 'default' }}>{record.refundsStatusStr}</span>
          );
        }
        return record.refundsStatusStr;
      },
    },
    {
      title: '操作',
      dataIndex: '',
      width: 120,
      align: 'center',
      fixed: 'right',
      render: (value, record, index) => {
        const status = value.refundsStatus;
        let operateName = ''; //主操作
        if (status === 80) {
          operateName = '处理退款';
        } else if (status === 85) {
          operateName = '收到退货';
        } else if (status === 100) {
          operateName = '发货';
        }
        return (
          <React.Fragment>
            <a
              hidden={!hasPermission('orderrefunds:update')}
              onClick={() => {
                this.setStateByTableColume(record, index);
                if (status === 80) {
                  //退款/售后审核
                  this.updateShopAgree(status);
                } else if (status === 85) {
                  //确认收货
                  this.updateShopConfirm(status);
                } else if (status === 100) {
                  //换货发货
                  this.updateShopDelivery(status);
                }
              }}
            >
              {operateName}
            </a>
            {/*详情操作*/}
            <Divider
              hidden={operateName === '' || operateName === null || operateName === undefined}
              type="vertical"
            />
            <a
              onClick={() => {
                this.setStateByTableColume(record, index);
                this.view();
              }}
            >
              <Tooltip title={<FormattedMessage id="ours.curd.list.info" defaultMessage="查看" />}>
                <Icon type="info" />
              </Tooltip>
            </a>
          </React.Fragment>
        );
      },
    },
  ];

  constructor(props) {
    super(props);
    this.state = {
      showList: 1, //1:显示列表、2:显示新增
      formList: Refunds.getFormList(),
      selectedRows: [],
      selectedIds: [],
      selectedIndexs: [],
      editModalTitle: null,
      editModalType: null,
      editModel: null,
      editModelConfirmLoading: false,
      //其他属性下面书写
      refundsStatusIN: null, //退款状态，用于-tabs和顶部筛选进行数据同步
      latestSort: 'latestApply', //按照最近申请排序、按照临近超时排序
      saveAuditLoading: false, //同意、拒绝 退款/售后申请loading
    };
    this.getAllExpressInfo();
  }

  // 筛选条件
  static getFormList = () => [
    {
      type: 'INPUT',
      field: 'refundsNo',
      label: '退款编号',
      placeholder: '退款编号',
    },
    {
      type: 'INPUT',
      field: 'orderNo',
      label: '订单号/商品名称',
      placeholder: '订单号/商品名称',
    },
    {
      type: 'INPUT',
      field: 'username',
      label: '用户名/手机号',
      placeholder: '用户名/手机号',
    },
    {
      type: 'DATE_RANGE',
      field: 'createTime',
      label: '申请时间',
      placeholder: ['申请时间', ''],
    },
    {
      type: 'SELECT',
      field: 'refundsType',
      label: '售后类型',
      placeholder: '售后类型',
      initialValue: '',
      list: [{ id: '', name: '请选择售后类型' }, ...uiUtils.getOptionJsonObjToArr(OrderRefundType)],
    },
    {
      type: 'SELECT',
      field: 'expressDeliveryMethod_ISNULL',
      label: '发货状态',
      placeholder: '发货状态',
      list: [
        { id: '', name: '请选择商家发货状态' },
        { id: 'true', name: '待发货/无需发' },
        { id: 'false', name: '已发货' },
        { id: '0', name: '需要物流' },
        { id: '1', name: '无需物流' },
      ],
    },
    {
      type: 'SELECT',
      field: 'refundsStatus',
      label: '退换货状态',
      placeholder: '退换货状态',
      initialValue: '',
    },
  ];

  componentDidMount() {
    this.getConstantsList();
    this.requestList();
  }

  componentWillUnmount() {}

  /**
   * 根据 formItem field 取值 查找formItem
   * @param formItemField obj的field字段
   * @returns 一个对象
   */
  findFormListItemByField = formItemField =>
    this.state.formList.find((value, index, array) => value.field === formItemField);

  query = fieldParams => {
    //1： 进行查询
    this.params = JSON.parse(JSON.stringify(Object.assign(this.params, fieldParams)));
    this.requestList();

    //2: 进行筛选和tabs状态同步
    this.setState({
      refundsStatusIN: '',
    });
  };

  add = () => {
    this.setState({
      editModalType: 'add',
      editModalTitle: formatMessage({ id: 'ours.curd.list.create' }), //创建
      editModel: {},
      showList: 2,
    });
  };

  view = () => {
    const { selectedRows, selectedIds, selectedIndexs } = this.state;
    if (!selectedRows) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-please' }));
      return;
    }
    if (selectedRows.length > 1) {
      uiUtils.showAlert(formatMessage({ id: 'ours.curd.show-alert.select-one-please' }));
      return;
    }
    this.setState({
      editModalType: 'view',
      editModalTitle: <FormattedMessage id="ours.curd.list.info" defaultMessage="查看" />,
      editModel: selectedRows[0],
      showList: 2,
    });
    this.getInfo(selectedRows[0].refundsId);
  };

  del = () => {
    const selectedRows = this.state.selectedRows;
    const refundsIds = [];
    for (let i = 0; i < selectedRows.length; i += 1) {
      refundsIds.push(selectedRows[i].refundsId);
    }

    uiUtils.showConfirm(formatMessage({ id: 'ours.curd.show-alert.confirm-delete' }), () => {
      this.setState({
        loading: true,
      });
      requestPromise(`${getWebPath()}orderrefunds/delete`, {
        method: 'POST',
        body: refundsIds,
      }).then(res => {
        this.setState({
          loading: false,
        });
        if (res && res.code === 0) {
          uiUtils.showMessage(
            formatMessage({ id: 'ours.curd.show-alert.operate-success' }),
            'success'
          );
          this.requestList();
        }
      });
    });
  };

  getInfo = refundsId => {};

  setStateByTableColume = (record, index) => {
    this.state = {
      ...this.state,
      selectedRows: [record],
      selectedIds: [record.refundsId],
      selectedIndexs: [index],
    };
  };

  /**
   * 退款订单状态的tabs被选择
   * @param refundsStatusIN
   */
  tabsOnSelect = refundsStatusIN => {
    this.setState({
      refundsStatusIN,
    });

    //1：进行搜索
    this.params.refundsStatus_IN = '';
    if (refundsStatusIN === '1001') {
      //待商家处理
      this.params.refundsStatus_IN = '80,85,100';
    } else if (refundsStatusIN === '1002') {
      //待买家处理
      this.params.refundsStatus_IN = '81,82,84,102';
    } else if (refundsStatusIN === '1003') {
      //系统处理中
      this.params.refundsStatus_IN = '90,92,93,94';
    }
    this.requestList();
  };

  /**
   * 退款/售后审核
   */
  updateShopAgree = statusOrder => {
    const { selectedRows, selectedIds, selectedIndexs } = this.state;
    this.setState({
      editModel: selectedRows[0],
      auditModelVisible: true,
    });
  };

  /**
   * 确认收货
   */
  updateShopConfirm = statusOrder => {
    const { selectedRows, selectedIds, selectedIndexs } = this.state;

    this.setState({
      confirmModel: selectedRows[0],
      confirmModelVisible: true,
    });
  };

  /**
   * 换货发货
   */
  updateShopDelivery = statusOrder => {
    const { selectedRows, selectedIds, selectedIndexs } = this.state;
    this.getOrderAddressInfo(selectedIds[0]);
    this.setState({
      deliveryModalVisible: true,
    });
  };

  /**
   * 调用 审核[退款/售后]申请 接口
   */
  reqeustUpdateAudit = (refundsId, auditStatus, auditRemark) => {
    this.setState({
      saveAuditLoading: true,
    });
    const data = { refundsId, auditStatus, auditRemark };
    requestPromise(`${getWebPath()}orderrefunds/updateAudit`, {
      method: 'POST',
      contentType: 'application/x-www-form-urlencoded',
      body: data,
    }).then(res => {
      this.setState({
        saveAuditLoading: false,
        auditModelVisible: false,
      });
      if (res && res.code === 0) {
        uiUtils.showMessage(
          formatMessage({ id: 'ours.curd.show-alert.operate-success' }),
          'success'
        );
        this.requestList();
      }
    });
  };

  //订单来源常量
  getConstantsList = () => {
    requestPromise(`${getWebPath('/api/constants?type=OrderRefundStatus')}`, {
      method: 'GET',
    }).then(res => {
      if (res) {
        //1:设置订单来源
        const orderRefundStatus = uiUtils.getOptionJsonObjToArr(res.OrderRefundStatus);
        const newRefundsArr = [{ id: '', name: '请选择退款订单状态' }, ...orderRefundStatus];
        const { formList: formListNew } = this.state;
        const formItem = this.findFormListItemByField('refundsStatus');
        formItem.list = newRefundsArr;

        this.setState({
          formList: formListNew,
        });
      }
    });
  };

  //获取所有的快递公司的信息
  getAllExpressInfo = () => {
    if (allExpressInfo.length > 0) {
      return;
    }
    requestPromise(getWebPath(`/express/expressList?isEnable=1&sidx=sort&order=asc`), {
      method: 'GET',
    }).then(res => {
      if (res && res.code === 0) {
        const express = res.page.list || [];
        allExpressInfo = [
          ...express.map(e => ({
            id: e.id,
            name: e.expressName,
            namePinyin: e.namePinyin,
            expressCode: e.expressCode,
            expressCodeKdniao: e.expressCodeKdniao,
          })),
        ];
      }
    });
  };

  /**
   * 商家确认收货
   */
  confirmReceipt = refundsId => {
    this.setState({
      confirmLoading: true,
    });
    const data = { refundsId };
    requestPromise(`${getWebPath()}orderrefunds/confirmReceipt`, {
      method: 'POST',
      contentType: 'application/x-www-form-urlencoded',
      body: data,
    }).then(res => {
      this.setState({
        confirmLoading: false,
        confirmModelVisible: false,
      });
      if (res && res.code === 0) {
        uiUtils.showMessage(
          formatMessage({ id: 'ours.curd.show-alert.operate-success' }),
          'success'
        );
        this.requestList();
      }
    });
  };

  /**
   * 获取换货单，换货商家发货的信息
   */
  getOrderAddressInfo = refundsId => {
    this.setState({
      deliveryModalLoading: true,
    });
    requestPromise(getWebPath(`/orderrefunds/orderAddressInfo/${refundsId}`), {
      method: 'GET',
    }).then(res => {
      this.setState({
        deliveryModalLoading: false,
      });
      if (res && res.code === 0) {
        //设置订单详情默认值
        const orderAddress = res.orderAddress;

        this.setState({
          deliveryModel: orderAddress,
        });
      }
    });
  };

  //保存物流发货信息
  saveExpressInfo = orderAddress => {
    let fieldNames = ['orderAddress.expressId', 'orderAddress.expressNumber'];
    if (
      orderAddress.orderAddress.expressDeliveryMethod === 1 ||
      orderAddress.orderAddress.expressDeliveryMethod === '1'
    ) {
      fieldNames = [];
    }
    const url = '/orderrefunds/delivery';
    const data = {
      refundsOrderAddressId: orderAddress.id,
      expressDeliveryMethod: orderAddress.orderAddress.expressDeliveryMethod,
      expressNumber: orderAddress.orderAddress.expressNumber,
      expressId: orderAddress.orderAddress.expressId,
    };
    //立刻执行
    setTimeout(() => {
      this.setState({
        // drawerSecondExpressEditLoading: true,
      });
    }, 0);

    requestPromise(getWebPath() + url, {
      method: 'POST',
      contentType: 'application/x-www-form-urlencoded',
      body: data,
    }).then(res => {
      this.setState({
        // drawerSecondExpressEditLoading: false,
      });
      if (res && res.code === 0) {
        uiUtils.showMessage(
          formatMessage({ id: 'ours.curd.show-alert.operate-success' }),
          'success'
        );
        this.requestList();
      }
    });
  };

  /**
   * 表格 筛选和排序 回调
   */
  filtersSorterChange = tableParams => {
    this.params = JSON.parse(JSON.stringify(Object.assign(this.params, tableParams)));
    this.requestList();
  };

  requestList = () => {
    requestLists(this, `${getWebPath()}orderrefunds/listVo`, this.params);
  };

  vShow = showListNum => ({ display: this.state.showList === showListNum ? 'block' : 'none' });

  render() {
    const style = {
      style: {
        marginLeft: 10,
        marginTop: 10,
      },
      disabled: this.state.selectedIndexs.length <= 0,
    };
    const gridStyle = {
      width: '100%',
      padding: '10px',
      paddingLeft: '30px',
      paddingRight: '30px',
      textAlign: 'left',
    };
    const gridTextStyle = {
      float: 'right',
      fontSize: '14px',
      display: 'inline-block',
      whitespace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    };
    /* eslint-disable react/jsx-no-bind */
    return (
      <PageHeaderWrapper title="">
        <Card
          bordered={false}
          style={{ ...this.vShow(1) }}
          className={styles.oursCard}
          bodyStyle={{ padding: '20px' }}
        >
          <BaseForm
            formList={this.state.formList}
            loading={this.state.loading}
            filterSubmit={this.query}
          />

          <div className="content-wrap">
            <Tabs
              activeKey={this.state.refundsStatusIN || ''}
              onChange={key => {
                this.tabsOnSelect(key);
              }}
              style={{ marginTop: '20px' }}
              type="card"
            >
              <Tabs.TabPane tab="全部" key="" />
              <Tabs.TabPane tab="待商家处理" key="1001" />
              <Tabs.TabPane tab="待买家处理" key="1002" />
              <Tabs.TabPane tab="系统处理中" key="1003" />
            </Tabs>
            <Radio.Group
              style={{ float: 'right', marginBottom: '18px' }}
              value={this.state.latestSort}
              onChange={value => {
                this.setState({
                  latestSort: value.target.value,
                });
                if (value.target.value === 'latestApply') {
                  this.params.sidx = 'create_time';
                } else {
                  //按照临近超时排序 1: now - time 从小到大排  2：time 必须是在当前时间之前
                  this.params.sidx = 'refunds_decision_last_time';
                }
                this.params.order = 'desc';
                this.requestList();
              }}
            >
              <Radio.Button value="latestApply">按照最近申请排序</Radio.Button>
              <Radio.Button value="latestTimeout">按照临近超时排序</Radio.Button>
            </Radio.Group>
            <br />
            <ETable
              onSelectRow={uiUtils.onSelectRow.bind(this)}
              primaryKey="refunds_id"
              selectedRows={this.state.selectedRows}
              selectedIds={this.state.selectedIds}
              selectedIndexs={this.state.selectedIndexs}
              onChange={this.filtersSorterChange}
              columns={this.columns}
              dataSource={this.state.list}
              pagination={this.state.pagination}
              loading={this.state.loading}
              scroll={{ x: 1100 }}
              rowSelection={{}}
            />
          </div>
        </Card>

        <BackTop />

        {/*审核对话框*/}
        <RefundAuditForm
          onCancel={() => {
            this.setState({ auditModelVisible: false });
          }}
          onOk={(refundsId, auditStatus, auditRemark) => {
            //这里保存审核结果
            this.reqeustUpdateAudit(refundsId, auditStatus, auditRemark);
          }}
          refreshRefunds={() => {
            this.requestList();
          }}
          model={this.state.editModel}
          refundAuditLoading={this.state.saveAuditLoading}
          visible={this.state.auditModelVisible}
        />

        {/*确认收货对话框*/}
        <Modal
          title="要确认已收到退货吗？"
          visible={this.state.confirmModelVisible}
          okButtonProps={{
            icon: 'down-circle',
            htmlType: 'submit',
            loading: this.state.confirmLoading,
          }}
          onCancel={() => {
            this.setState({ confirmModelVisible: false });
          }}
          onOk={(refundsId, auditStatus, auditRemark) => {
            //这里保存审核结果
            this.confirmReceipt(this.state.confirmModel.refundsId);
          }}
          refreshRefunds={() => {
            this.requestList();
          }}
        >
          <ConfirmReceiptForm
            model={this.state.confirmModel}
            refundReceiptConfirmLoading={this.state.confirmLoading}
          />
        </Modal>
        {/*发货对话框*/}
        <DeliveryForm
          model={this.state.deliveryModel}
          visible={this.state.deliveryModalVisible}
          saveLoading={this.state.deliveryModalLoading}
          onCancel={() => {
            this.deliveryForm.props.form.resetFields();
            this.setState({ deliveryModalVisible: false });
          }}
          onOk={orderAddress => {
            //这里保存审核结果
            this.saveExpressInfo(orderAddress);
            this.setState({
              deliveryModalVisible: false,
            });
          }}
          refreshRefunds={() => {
            this.requestList();
          }}
          wrappedComponentRef={inst => {
            this.deliveryForm = inst;
          }}
        />
        <Spin spinning={this.state.editModelConfirmLoading} delay={10}>
          {//返回null,这里对不用的组件进行销毁
          this.state.showList === 1 ? null : (
            <Card
              title={this.state.editModalTitle}
              bordered={false}
              actions={[
                <div>
                  <React.Fragment>
                    <Button
                      type="primary"
                      hidden={this.state.editModalType === 'view'}
                      style={{ marginRight: '18px' }}
                      onClick={this.saveOrUpdate}
                    >
                      <FormattedMessage id="ours.curd.add.save" defaultMessage="保存" />
                    </Button>
                    <Button
                      style={{ marginRight: '18px' }}
                      onClick={() => {
                        this.editForm.props.form.resetFields();
                        this.setState({ showList: 1 });
                      }}
                    >
                      <FormattedMessage id="ours.curd.add.back" defaultMessage="返回" />
                    </Button>
                  </React.Fragment>
                </div>,
              ]}
              style={{ ...this.vShow(2) }}
              bodyStyle={{ padding: '20px' }}
              ref={node => {
                this.container = node;
              }}
            >
              <EditForm
                type={this.state.editModalType}
                model={this.state.editModel}
                wrappedComponentRef={inst => {
                  this.editForm = inst;
                }}
              />
            </Card>
          )}
        </Spin>
      </PageHeaderWrapper>
    );
  }
}

export default Refunds;

/**
 * 退款审核表单
 */
@Form.create()
class RefundAuditForm extends React.Component {
  static propTypes = {
    visible: PropTypes.bool, //退款审核表单modal是否显示
    onCancel: PropTypes.func, //退款审核表单modal关闭事件
    onOk: PropTypes.func, //退款审核表单modal保存事件
    refreshRefunds: PropTypes.func, //刷新订单列表
    model: PropTypes.object, //数据模型model，对应后台的model
    refundAuditLoading: PropTypes.bool, //数据模型model，对应后台的model
  };

  static defaultProps = {
    visible: false,
    onCancel: () => {},
    onOk: (refundsId, auditStatus, auditRemark) => {},
    refreshRefunds: null,
    model: null,
    refundAuditLoading: null,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const visible = this.props.visible;
    const onCancel = this.props.onCancel;
    const onOk = this.props.onOk;
    const {
      model,
      form,
      form: { getFieldDecorator, getFieldValue, setFieldsValue },
    } = this.props;
    const formItemLayout = {
      labelCol: { span: 3 },
      wrapperCol: { span: 21 }, //5+19=24,少一个栅格
    };
    const colSpanLayout = { md: 24, sm: 24 }; //每一col跨?列
    const rowGutterPxLayout = { md: 12, sm: 24 }; //col之间的间隔?px
    //校验文档：https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99
    const gridStyle = {
      width: '100%',
      padding: '10px',
      paddingLeft: '30px',
      paddingRight: '30px',
      textAlign: 'left',
    };
    const gridTextStyle = {
      float: 'right',
      fontSize: '14px',
      display: 'inline-block',
      whitespace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    };
    return (
      <Modal
        title="退款/售后审核"
        visible={visible}
        onCancel={onCancel}
        onOk={() => {
          const { auditStatus, auditRemark } = this.props.form.getFieldsValue();

          let fieldNames = ['auditStatus', 'auditRemark'];
          if (auditStatus === 'true' || auditStatus === true) {
            fieldNames = [];
          }
          this.props.form.validateFieldsAndScroll(fieldNames, (err, values) => {
            if (!err) {
              const refundsId = this.props.model.refundsId;
              onOk(refundsId, auditStatus, auditRemark);
            }
          });
        }}
        destroyOnClose
        closable
        okButtonProps={{
          icon: 'down-circle',
          htmlType: 'submit',
          loading: this.props.refundAuditLoading,
        }}
        okText="保存"
        width={700}
        saveDistance={0}
      >
        <Card
          bordered
          hoverable
          size="small"
          bodyStyle={{ paddingBottom: 10 }}
          style={{ marginBottom: 20 }}
          title="基本信息"
        >
          <Card.Grid style={gridStyle}>
            <span>编号</span>
            <span style={gridTextStyle}>{model !== null ? model.refundsNo : ''}</span>
          </Card.Grid>
          <Card.Grid style={gridStyle}>
            <span>商品</span>
            <span style={gridTextStyle}>{model !== null ? model.productName : ''}</span>
          </Card.Grid>
          <Card.Grid style={gridStyle}>
            <span>类型</span>
            <span style={gridTextStyle}>
              <Tag color="purple">
                {model !== null
                  ? model.refundsType === 0
                    ? '仅退款'
                    : model.refundsType === 1
                    ? '退款退货'
                    : '换货'
                  : ''}
              </Tag>
            </span>
          </Card.Grid>
          <Card.Grid style={gridStyle}>
            <span>是否收到货</span>
            <span style={{ ...gridTextStyle }}>
              {' '}
              <Tag color="magenta">
                {model !== null
                  ? model.refundsGoodsType === 'true'
                    ? '未收到货'
                    : '已经收到货'
                  : ''}
              </Tag>
            </span>
          </Card.Grid>
          <Card.Grid style={gridStyle}>
            <span>备注</span>
            <span style={gridTextStyle}>{model !== null ? model.refundsReasonNotes : ''}</span>
          </Card.Grid>
        </Card>

        {/*退款/售后图片*/}
        {model != null &&
          model.refundsImgs !== null &&
          model.refundsImgs !== undefined &&
          model.refundsImgs.length > 0 && (
            <Card
              bordered
              hoverable
              size="small"
              bodyStyle={{ paddingBottom: 10 }}
              style={{ marginBottom: 20 }}
              title="用户上传的凭证"
            >
              <List
                rowKey="id"
                style={{ marginTop: 24 }}
                grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
                dataSource={model.refundsImgs.split(',')}
                renderItem={item => (
                  <List.Item>
                    <Card
                      hoverable
                      bodyStyle={{ paddingBottom: 10 }}
                      cover={<DefaultImage src={item} alt={item || ''} width={50} />}
                    />
                  </List.Item>
                )}
              />
            </Card>
          )}

        <Form layout="horizontal">
          <Row gutter={{ ...rowGutterPxLayout }}>
            <Col {...colSpanLayout}>
              <FormItem label="审核原因" {...formItemLayout}>
                {getFieldDecorator('auditStatus', {
                  initialValue: 'true',
                })(
                  <RadioGroup
                    onChange={value => {
                      if (value.target.value === 'true' || value.target.value === true) {
                        this.props.form.resetFields();
                      }
                    }}
                  >
                    <Radio value="true">同意</Radio>
                    <Radio value="false">拒绝</Radio>
                  </RadioGroup>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayout}>
              <FormItem label="审核备注" {...formItemLayout}>
                {getFieldDecorator('auditRemark', {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '审核备注必填',
                    },
                    {
                      min: 0,
                      max: 100,
                      message: '最长100个字符',
                    },
                  ],
                })(
                  <TextArea rows={3} maxLength={100} placeholder="如果拒绝，请填写您的拒绝原因" />
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

/**
 * 收到退货表单
 */
@Form.create()
class ConfirmReceiptForm extends React.Component {
  static propTypes = {
    model: PropTypes.object, //数据模型model，对应后台的model
    refundReceiptConfirmLoading: PropTypes.bool, //数据模型model，对应后台的model
  };

  static defaultProps = {
    model: null,
    refundReceiptConfirmLoading: false,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  //获取快递信息
  getExpressInfo = (expressCode, expressNumber) => {
    const expressData = [];
    if (expressCode == null || expressCode === undefined || expressCode.length <= 0) {
      this.setState({
        expressData,
      });
      return expressData;
    }
    this.setState({
      expressDataLoading: true,
    });
    requestPromise(
      getWebPath(
        `/api/userRelated/expressLogistics?expressCode=${expressCode}&expressLogisticsNo=${expressNumber}`
      ),
      {
        method: 'GET',
      }
    ).then(res => {
      if (res && res.code === 0) {
        //快递100
        if (res.object.logisticsResultKuadi100) {
          if (
            res.object.logisticsResultKuadi100.data &&
            res.object.logisticsResultKuadi100.data.length > 0
          ) {
            for (let i = 0; i < res.object.logisticsResultKuadi100.data.length; i += 1) {
              expressData.push(
                <Timeline.Item>
                  {res.object.logisticsResultKuadi100.data[i].time}&nbsp;
                  {res.object.logisticsResultKuadi100.data[i].context}
                </Timeline.Item>
              );
            }
          } else {
            expressData.push(
              <Timeline.Item>{res.object.logisticsResultKuadi100.message}</Timeline.Item>
            );
          }
        } else if (res.object.logisticsResultKdNiao) {
          //快递鸟
          if (
            res.object.logisticsResultKdNiao.Traces &&
            res.object.logisticsResultKdNiao.Traces.length > 0
          ) {
            for (let i = 0; i < res.object.logisticsResultKdNiao.Traces.length; i += 1) {
              const traces = res.object.logisticsResultKdNiao.Traces[i];
              expressData.push(
                <Timeline.Item>
                  {`${traces.AcceptTime}`}&nbsp;
                  {`${traces.AcceptStation}`}
                </Timeline.Item>
              );
            }
            //这里反转一下数据：
            expressData.reverse();
          } else {
            expressData.push(
              <Timeline.Item>{res.object.logisticsResultKdNiao.Reason}</Timeline.Item>
            );
          }
        }
      } else if (res.object) {
        expressData.push(<Timeline.Item>{res.object.msg || res.msg || ''}</Timeline.Item>);
      } else {
        expressData.push(<Timeline.Item>{res.msg || ''}</Timeline.Item>);
      }

      this.setState({
        expressDataLoading: false,
        expressDataPlatform: res.object ? res.object.platformType || '' : '',
        expressData,
      });
    });
    return expressData;
  };

  render() {
    const model = this.props.model || { type: '' };
    //查询当前的快递单的，快递号
    const express = this.state.express || {
      expressCode: '',
      expressNumber: '',
      officialWebsite: '',
      icon: '',
    };

    const gridStyle = {
      width: '100%',
      padding: '10px',
      paddingLeft: '30px',
      paddingRight: '30px',
      textAlign: 'left',
    };
    const gridTextStyle = {
      float: 'right',
      fontSize: '14px',
      display: 'inline-block',
      whitespace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    };

    const gridUserStyle = {
      width: '100%',
      padding: '10px',
      paddingLeft: '30px',
      paddingRight: '30px',
      textAlign: 'left',
    };

    return (
      <Fragment>
        <Card
          bordered
          hoverable
          size="small"
          bodyStyle={{ paddingBottom: 10 }}
          style={{ marginBottom: 20 }}
          title="快递信息"
        >
          {model.expressDeliveryMethod === 1 ? (
            '无需物流'
          ) : model.refundsGoodsType === 'true' || model.refundsGoodsType === true ? (
            <Card.Grid style={gridStyle}>
              <Avatar
                src={
                  model !== null &&
                  model.expressEntity !== undefined &&
                  model.expressEntity !== null &&
                  model.expressEntity !== undefined
                    ? model.expressEntity.icon
                    : ''
                }
              />
              <span style={{ marginLeft: 30 }}>
                {model !== null &&
                model.expressEntity !== undefined &&
                model.expressEntity !== null &&
                model.expressEntity !== undefined
                  ? model.expressEntity.expressName
                  : ''}
              </span>
              <span style={{ marginLeft: 30 }}>
                {model !== null &&
                model.expressEntity !== undefined &&
                model.expressEntity !== null &&
                model.expressEntity !== undefined
                  ? model.refundsExpressNumber
                  : ''}
              </span>
              <a
                style={{ marginLeft: 30 }}
                onClick={() => {
                  this.setState({
                    express: {
                      icon: model.expressEntity.icon,
                      officialWebsite: model.expressEntity.officialWebsite,
                      expressCode: model.expressEntity.expressCode,
                      expressNumber: model.refundsExpressNumber,
                    },
                    drawerSecondExpress: true,
                  });
                  this.getExpressInfo(model.expressEntity.expressCode, model.refundsExpressNumber);
                }}
              >
                查看物流
              </a>
            </Card.Grid>
          ) : (
            '买家未收到货'
          )}
        </Card>

        <Drawer
          title="查看物流信息"
          width={420}
          closable
          visible={this.state.drawerSecondExpress}
          onClose={() => {
            this.setState({
              drawerSecondExpress: false,
            });
          }}
        >
          <Card loading={this.state.expressDataLoading}>
            <Card.Grid style={gridUserStyle}>
              <Avatar shape="square" size={40} icon="user" src={express.icon || ''} />
              <span>&nbsp;&nbsp;&nbsp;&nbsp;{express.expressName}</span>
              <span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <CopyToClipboard
                  text={express.expressNumber}
                  onCopy={() => {
                    uiUtils.showMessage(
                      formatMessage({ id: 'ours.curd.list.msg.copySuccess' }),
                      'success'
                    );
                  }}
                >
                  <a
                    href={express.officialWebsite}
                    rel="noreferrer noopener"
                    target="_blank"
                    title={express.expressName}
                  >
                    {express.expressNumber}
                  </a>
                </CopyToClipboard>
                <span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <Tooltip
                    placement="top"
                    title={`数据来源${
                      this.state.expressDataPlatform === 1
                        ? '快递鸟'
                        : this.state.expressDataPlatform === 2
                        ? '快递100'
                        : '阿里物流'
                    }`}
                  >
                    <Button
                      icon="question-circle"
                      size="small"
                      onClick={() => {
                        const url =
                          this.state.expressDataPlatform === 1
                            ? 'https://www.kdniao.com/'
                            : this.state.expressDataPlatform === 2
                            ? 'https://www.kuaidi100.com/'
                            : 'https://www.cainiao.com/markets/cnwww/kuaidi-landing';
                        window.open(`${url}`, '_blank');
                      }}
                    />
                  </Tooltip>
                </span>
              </span>
            </Card.Grid>
            <Card.Grid style={{ width: '100%' }}>
              <Timeline>
                {/*获取快递信息*/}
                {this.state.expressData}
              </Timeline>
            </Card.Grid>
          </Card>
        </Drawer>
      </Fragment>
    );
  }
}

/**
 * 发货表单
 */
@Form.create()
class DeliveryForm extends React.Component {
  static propTypes = {
    model: PropTypes.object, //数据模型model，对应后台的model
    visible: PropTypes.bool,
    saveLoading: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    refreshRefunds: PropTypes.func, //刷新订单列表
  };

  static defaultProps = {
    visible: false,
    model: null,
    saveLoading: null,
    onCancel: () => {},
    onOk: () => {},
    refreshRefunds: null,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const onCancel = this.props.onCancel;
    const onOk = this.props.onOk;
    const visible = this.props.visible;
    const saveLoading = this.props.saveLoading;
    const refreshRefunds = this.props.refreshRefunds;
    const model = this.props.model || {};
    const {
      form,
      form: { getFieldDecorator, getFieldValue, setFieldsValue },
    } = this.props;
    const colSpanLayout = { md: 12, sm: 24 }; //每一col跨?列
    const colSpanLayoutForUserEdit = { md: 24, sm: 24 }; //每一col跨?列
    const rowGutterPxLayout = { md: 24, sm: 16 }; //col之间的间隔?px
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 }, //5+19=24,少一个栅格
    };

    return (
      <Modal
        title="发货"
        visible={visible}
        saveLoading={saveLoading}
        onCancel={onCancel}
        onOk={() => {
          this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
              //这里保存审核结果
              const orderAddress = Object.assign(model, this.props.form.getFieldsValue());
              onOk(orderAddress);
            }
          });
        }}
        refreshRefunds={refreshRefunds}
      >
        <Form layout="horizontal" style={{ marginBottom: '150px' }}>
          <Row gutter={{ ...rowGutterPxLayout }}>
            <Col {...colSpanLayoutForUserEdit}>
              <FormItem label="发货方式" {...formItemLayout}>
                {getFieldDecorator('orderAddress.expressDeliveryMethod', {
                  initialValue: model.expressDeliveryMethod || 0,
                  rules: [
                    {
                      required: true,
                      message: '请选择发货方式',
                    },
                  ],
                })(
                  <RadioGroup
                    onChange={e => {
                      model.expressDeliveryMethod = e.target.value;
                      this.setState({});
                    }}
                  >
                    <Radio value={0}>需要物流</Radio>
                    <Radio value={1}>无需物流</Radio>
                  </RadioGroup>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayoutForUserEdit}>
              <FormItem
                label="快递公司"
                extra="如🔍到相似的快递公司，请优先选择排列在前面的;&nbsp;搜索支持汉字、拼音、简称等进行搜索"
                {...formItemLayout}
              >
                {getFieldDecorator('orderAddress.expressId', {
                  initialValue: model.expressId || '',
                  rules: [
                    {
                      required: true,
                      message: '请选择快递公司',
                    },
                  ],
                })(
                  <Select
                    placeholder="支持汉字、拼音、简称等进行搜索"
                    disabled={model.expressDeliveryMethod === 1}
                    showSearch
                    filterOption={(input, option) =>
                      option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
                      `${option.props.namePinyin}`.toLowerCase().indexOf(input.toLowerCase()) >=
                        0 ||
                      `${option.props.expressCode}`.toLowerCase().indexOf(input.toLowerCase()) >=
                        0 ||
                      `${option.props.expressCodeKdniao}`
                        .toLowerCase()
                        .indexOf(input.toLowerCase()) >= 0
                    }
                  >
                    <option value="">请选择快递公司</option>
                    {uiUtils.getOptionList(allExpressInfo)}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col {...colSpanLayoutForUserEdit}>
              <FormItem
                label="快递单号"
                extra="请仔细填写快速公司和快递单号，发货后15天之内可以修改，过期不可修改"
                {...formItemLayout}
              >
                {getFieldDecorator('orderAddress.expressNumber', {
                  initialValue: model.expressNumber,
                  rules: [
                    {
                      required: true,
                      message: '快递单号必填',
                    },
                    {
                      whitespace: true,
                      message: '不能包含空白符',
                    },
                  ],
                })(
                  <Input
                    type="text"
                    autocomplete="off"
                    disabled={model.expressDeliveryMethod === 1}
                    maxlength={100}
                    placeholder="快递单号"
                  />
                )}
                <Tooltip
                  placement="top"
                  title="如果没有找到您想要的快递公司，请到快递管理模块进行启用或者新增"
                >
                  <Link to="/config/express">
                    <Button
                      type="primary"
                      style={{ fontSize: '12px' }}
                      icon="question-circle"
                      size="small"
                    >
                      快递公司管理
                    </Button>
                  </Link>
                </Tooltip>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}

/**
 *  新增、编辑、复制、查看的Form
 */

/* eslint react/no-multi-comp:0 */
class EditForm extends React.Component {
  static propTypes = {
    type: PropTypes.string, //form类型，可选值：add（增加）、update（修改）、copy（复制）、view（查看）、
    model: PropTypes.object, //数据模型model，对应后台的model
  };

  static defaultProps = {
    type: '', //表单布局数组
    model: null,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  /**
   * 生命周期-属性发生变化...componentWillReceiveProps
   * 这里的nextProps，可以获取到所有的属性。
   * 目前没用，因为 dialog 每次都被销毁了
   */
  componentWillReceiveProps(nextProps) {
    /*if (nextProps.model) {
      this.state = {};
      //使用setFieldsValue实现修改form value的值，不用使用 this.setState({});
      this.props.model.xxx = 'value';
      this.props.form.setFieldsValue({xxx: 'value'});
    }*/
  }

  getPropsByKey = prop => {
    const model = this.props.model || {};
    const finalModel = Object.assign(model, this.props.form.getFieldsValue());
    return finalModel[prop];
  };

  //获取快递信息
  getExpressInfo = (expressCode, expressNumber) => {
    const expressData = [];
    if (expressCode == null || expressCode === undefined || expressCode.length <= 0) {
      this.setState({
        expressData,
      });
      return expressData;
    }
    this.setState({
      expressDataLoading: true,
    });
    requestPromise(
      getWebPath(
        `/api/userRelated/expressLogistics?expressCode=${expressCode}&expressLogisticsNo=${expressNumber}`
      ),
      {
        method: 'GET',
      }
    ).then(res => {
      if (res && res.code === 0) {
        //快递100
        if (res.object.logisticsResultKuadi100) {
          if (
            res.object.logisticsResultKuadi100.data &&
            res.object.logisticsResultKuadi100.data.length > 0
          ) {
            for (let i = 0; i < res.object.logisticsResultKuadi100.data.length; i += 1) {
              expressData.push(
                <Timeline.Item>
                  {res.object.logisticsResultKuadi100.data[i].time}&nbsp;
                  {res.object.logisticsResultKuadi100.data[i].context}
                </Timeline.Item>
              );
            }
          } else {
            expressData.push(
              <Timeline.Item>{res.object.logisticsResultKuadi100.message}</Timeline.Item>
            );
          }
        } else if (res.object.logisticsResultKdNiao) {
          //快递鸟
          if (
            res.object.logisticsResultKdNiao.Traces &&
            res.object.logisticsResultKdNiao.Traces.length > 0
          ) {
            for (let i = 0; i < res.object.logisticsResultKdNiao.Traces.length; i += 1) {
              const traces = res.object.logisticsResultKdNiao.Traces[i];
              expressData.push(
                <Timeline.Item>
                  {`${traces.AcceptTime}`}&nbsp;
                  {`${traces.AcceptStation}`}
                </Timeline.Item>
              );
            }
            //这里反转一下数据：
            expressData.reverse();
          } else {
            expressData.push(
              <Timeline.Item>{res.object.logisticsResultKdNiao.Reason}</Timeline.Item>
            );
          }
        }
      } else if (res.object) {
        expressData.push(<Timeline.Item>{res.object.msg || res.msg || ''}</Timeline.Item>);
      } else {
        expressData.push(<Timeline.Item>{res.msg || ''}</Timeline.Item>);
      }

      this.setState({
        expressDataLoading: false,
        expressDataPlatform: res.object ? res.object.platformType || '' : '',
        expressData,
      });
    });
    return expressData;
  };

  getCurrent = status => {
    let current = 0;
    if (status === 80) {
      current = 0;
    } else if (status === 81) {
      current = 1;
    } else if (status === 91) {
      current = 2;
    }
    return current;
  };

  render() {
    const type = this.props.type; //编辑是：新增（add）、编辑(edit)、复制(copy)、还是查看(view)
    const model = this.props.model || {};
    //查询当前的快递单的，快递号
    const express = this.state.express || {
      expressCode: '',
      expressNumber: '',
      officialWebsite: '',
      icon: '',
    };

    const {
      form,
      form: { getFieldDecorator, getFieldValue, setFieldsValue },
    } = this.props;
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 }, //5+19=24,少一个栅格
    };
    const colSpanLayout = { md: 12, sm: 24 }; //每一col跨?列
    const rowGutterPxLayout = { md: 24, sm: 16 }; //col之间的间隔?px
    const inputCodeDisabled = {
      disabled: type === 'update',
    };

    const gridUserStyle = {
      width: '100%',
      padding: '10px',
      paddingLeft: '30px',
      paddingRight: '30px',
      textAlign: 'left',
    };

    const gridTextStyle = {
      float: 'right',
      fontSize: '14px',
      display: 'inline-block',
      whitespace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
    };

    const style = {
      style: {
        marginLeft: 10,
        marginTop: 10,
      },
      //disabled: this.state.selectedIndexs.length <= 0,
    };

    const gridStyle = {
      width: '100%',
      padding: '10px',
      paddingLeft: '30px',
      paddingRight: '30px',
      textAlign: 'left',
    };
    let refundsTypeStr = '';
    if (OrderRefundType[model.refundsType] === '仅退款') {
      refundsTypeStr = (
        <Tag style={{ cursor: 'default' }} className={styles.label_success}>
          仅退款-{model.refundsGoodsType ? '已经收到货' : '未收到货'}
        </Tag>
      );
    } else if (OrderRefundType[model.refundsType] === '退款退货') {
      refundsTypeStr = (
        <Tag style={{ cursor: 'default' }} className={styles.label_danger}>
          退款退货-{model.refundsGoodsType ? '已经收到货' : '未收到货'}
        </Tag>
      );
    } else if (OrderRefundType[model.refundsType] === '换货') {
      refundsTypeStr = (
        <Tag style={{ cursor: 'default' }} className={styles.label_primary}>
          换货-{model.refundsGoodsType ? '已经收到货' : '未收到货'}
        </Tag>
      );
    }

    //校验文档：https://ant.design/components/form-cn/#%E6%A0%A1%E9%AA%8C%E8%A7%84%E5%88%99
    return (
      <Fragment>
        <Form layout="horizontal">
          <Row gutter={{ ...rowGutterPxLayout }}>
            {/*主体信息*/}
            <Card
              bordered
              hoverable
              size="small"
              bodyStyle={{ paddingBottom: 10 }}
              style={{ marginBottom: 20 }}
              title="退货单基本信息"
            >
              <Col {...colSpanLayout}>
                <FormItem label="退换货编号" {...formItemLayout}>
                  {model.refundsNo}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="用户名" {...formItemLayout}>
                  {model.username}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="订单号" {...formItemLayout}>
                  {model.orderNo}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="申请时间" {...formItemLayout}>
                  {model.createTime}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="售后类型" {...formItemLayout}>
                  {refundsTypeStr}
                </FormItem>
              </Col>
              {/*<Col {...colSpanLayout}>
                <FormItem label="货物状态" {...formItemLayout}>
                  {model.refundsGoodsType ? '已收到货' : '未收到货'}
                </FormItem>
              </Col>*/}
              <Col {...colSpanLayout}>
                <FormItem label="商家拒绝的原因" {...formItemLayout}>
                  {model.refundsRejectReason}
                </FormItem>
              </Col>
            </Card>

            {/*退换货信息*/}
            <Card
              bordered
              hoverable
              size="small"
              bodyStyle={{ paddingBottom: 10 }}
              style={{ marginBottom: 20 }}
              title="退换货信息"
            >
              <Col {...colSpanLayout}>
                <FormItem label="退换货金额" {...formItemLayout}>
                  {`￥${numeral(model.refundsMoney).format('0,0.00')}`}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="退换货状态" {...formItemLayout}>
                  <Tag style={{ cursor: 'default' }} className={styles.label_default}>
                    {model.refundsStatusStr}
                  </Tag>
                  {/*售后单状态，101，代表换货已重新发货*/}
                  <a
                    hidden={model.refundsStatus !== 101}
                    style={{ marginLeft: 30 }}
                    onClick={() => {
                      this.setState({
                        express: {
                          icon: model.orderAddressEntity.icon,
                          officialWebsite: model.orderAddressEntity.officialWebsite,
                          expressCode: model.orderAddressEntity.expressCode,
                          expressNumber: model.orderAddressEntity.expressNumber,
                        },
                        drawerSecondExpress: true,
                      });
                      this.getExpressInfo(
                        model.orderAddressEntity.expressCode,
                        model.orderAddressEntity.expressNumber
                      );
                    }}
                  >
                    查看物流
                  </a>
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="重新申请时间" {...formItemLayout}>
                  {model.refundsStartAginTime}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="审核的最后时间" {...formItemLayout}>
                  {model.refundsDecisionLastTime}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="退换货拒绝时间" {...formItemLayout}>
                  {model.refundsTime}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="退换货通过时间" {...formItemLayout}>
                  {model.refundsSuccessTime}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="退换货原因" {...formItemLayout}>
                  {model.refundsReason}
                </FormItem>
              </Col>
              <Col {...colSpanLayout}>
                <FormItem label="备注" {...formItemLayout}>
                  {model.refundsReasonNotes}
                </FormItem>
              </Col>
            </Card>

            {/*图片*/}
            <Card
              bordered
              hoverable
              size="small"
              bodyStyle={{ paddingBottom: 10 }}
              style={{ marginBottom: 20 }}
              title="用户上传的凭证"
            >
              {model.refundsImgs === undefined || model.refundsImgs.trim() === '' ? (
                '没有图片啦'
              ) : (
                <List
                  rowKey="id"
                  style={{ marginTop: 24 }}
                  grid={{ gutter: 24, xl: 4, lg: 3, md: 3, sm: 2, xs: 1 }}
                  dataSource={model.refundsImgs.split(',')}
                  renderItem={item => (
                    <List.Item>
                      <Card
                        hoverable
                        bodyStyle={{ paddingBottom: 10 }}
                        cover={<DefaultImage src={item} alt={item || ''} width={50} />}
                      />
                    </List.Item>
                  )}
                />
              )}
            </Card>

            {/*退款信息*/}
            {model.refundsType === 2 ? (
              ''
            ) : (
              <Card
                bordered
                hoverable
                size="small"
                bodyStyle={{ paddingBottom: 10 }}
                style={{ marginBottom: 20 }}
                title="退款信息"
              >
                <Col {...colSpanLayout}>
                  <FormItem label="退款完成时间" {...formItemLayout}>
                    {model.refundsRealTime}
                  </FormItem>
                </Col>
                <Col {...colSpanLayout}>
                  <FormItem label="支付通道状态" {...formItemLayout}>
                    {model.refundsRealMoneyNotes}
                  </FormItem>
                </Col>
                <Col {...colSpanLayout}>
                  <FormItem label="售后评价时间" {...formItemLayout}>
                    {model.refundsCommentTime}
                  </FormItem>
                </Col>
              </Card>
            )}

            {/*打款进度条*/}
            {model.refundsType === 2 ? (
              ''
            ) : (
              <Card
                bordered
                hoverable
                size="small"
                bodyStyle={{ paddingBottom: 10 }}
                style={{ marginBottom: 20 }}
                title="退款进度"
              >
                <Fragment>
                  <Steps
                    // progressDot={customDot}
                    current={this.getCurrent(model.refundsStatus)}
                    size="small"
                  >
                    <Steps.Step title="申请" />
                    <Steps.Step title="等待退款" />
                    <Steps.Step
                      title={
                        model.refundsStatus === 92 ||
                        model.refundsStatus === 93 ||
                        model.refundsStatus === 4
                          ? '退款失败'
                          : '成功'
                      }
                    />
                  </Steps>
                </Fragment>
              </Card>
            )}

            {/*退货买家回寄快递信息*/}
            {model.expressEntity === undefined ? (
              ''
            ) : (
              <Card
                bordered
                hoverable
                size="small"
                bodyStyle={{ paddingBottom: 10 }}
                style={{ marginBottom: 20 }}
                title="退货买家回寄快递信息"
              >
                <Card.Grid style={gridStyle}>
                  <span>退货用户发货时间：{model.refundsExpressTime}</span>
                </Card.Grid>
                {model.expressDeliveryMethod === 1 ? (
                  '无需物流'
                ) : (
                  <Card.Grid style={gridStyle}>
                    <Avatar src={model !== null ? model.expressEntity.icon : ''} />
                    <span style={{ marginLeft: 30 }}>
                      {model !== null ? model.expressEntity.expressName : ''}
                    </span>
                    <span style={{ marginLeft: 30 }}>
                      {model !== null ? model.refundsExpressNumber : ''}
                    </span>
                    <a
                      style={{ marginLeft: 30 }}
                      onClick={() => {
                        this.setState({
                          express: {
                            icon: model.expressEntity.icon,
                            officialWebsite: model.expressEntity.officialWebsite,
                            expressCode: model.expressEntity.expressCode,
                            expressNumber: model.refundsExpressNumber,
                          },
                          drawerSecondExpress: true,
                        });
                        this.getExpressInfo(
                          model.expressEntity.expressCode,
                          model.refundsExpressNumber
                        );
                      }}
                    >
                      查看物流
                    </a>
                  </Card.Grid>
                )}
              </Card>
            )}
          </Row>
        </Form>
        <Drawer
          title="查看物流信息"
          width={420}
          closable
          visible={this.state.drawerSecondExpress}
          onClose={() => {
            this.setState({
              drawerSecondExpress: false,
            });
          }}
        >
          <Card loading={this.state.expressDataLoading}>
            <Card.Grid style={gridUserStyle}>
              <Avatar shape="square" size={40} icon="user" src={express.icon || ''} />
              <span>&nbsp;&nbsp;&nbsp;&nbsp;{express.expressName}</span>
              <span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <CopyToClipboard
                  text={express.expressNumber}
                  onCopy={() => {
                    uiUtils.showMessage(
                      formatMessage({ id: 'ours.curd.list.msg.copySuccess' }),
                      'success'
                    );
                  }}
                >
                  <a
                    href={express.officialWebsite}
                    rel="noreferrer noopener"
                    target="_blank"
                    title={express.expressName}
                  >
                    {express.expressNumber}
                  </a>
                </CopyToClipboard>
                <span>
                  &nbsp;&nbsp;&nbsp;&nbsp;
                  <Tooltip
                    placement="top"
                    title={`数据来源${
                      this.state.expressDataPlatform === 1
                        ? '快递鸟'
                        : this.state.expressDataPlatform === 2
                        ? '快递100'
                        : '阿里物流'
                    }`}
                  >
                    <Button
                      icon="question-circle"
                      size="small"
                      onClick={() => {
                        const url =
                          this.state.expressDataPlatform === 1
                            ? 'https://www.kdniao.com/'
                            : this.state.expressDataPlatform === 2
                            ? 'https://www.kuaidi100.com/'
                            : 'https://www.cainiao.com/markets/cnwww/kuaidi-landing';
                        window.open(`${url}`, '_blank');
                      }}
                    />
                  </Tooltip>
                </span>
              </span>
            </Card.Grid>
            <Card.Grid style={{ width: '100%' }}>
              <Timeline>
                {/*获取快递信息*/}
                {this.state.expressData}
              </Timeline>
            </Card.Grid>
          </Card>
        </Drawer>
      </Fragment>
    );
  }
}

/* eslint-disable no-class-assign */
//无更多的绑定， 请用 @Form.create() 注解替换
EditForm = Form.create({})(EditForm);
